<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>个人通讯录系统</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }

        h1, h2 {
            color: #333;
            margin-bottom: 10px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        tr:hover {
            background-color: #f5f5f5;
        }

        form {
            margin-top: 20px;
        }

        label {
            display: inline-block;
            width: 80px;
        }

        input[type="text"] {
            padding: 5px;
            width: 200px;
            border: 1px solid #ddd;
            border-radius: 3px;
        }

        button {
            padding: 5px 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        button[type="submit"] {
            margin-right: 10px;
        }

        button[type="button"] {
            background-color: #bbb;
        }
        #delete{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>个人通讯录系统</h1>
        <span> <button @click="getContacts()">获取联系人信息</button></span>
        <table>
            <tr>
                <th>姓名</th>
                <th>住址</th>
                <th>电话</th>
                <th>操作</th>
            </tr>
            <tr v-for="contact in contacts" :key="contact.id">
                <td>{{ contact.name }}</td>
                <td>{{ contact.address }}</td>
                <td>{{ contact.phone }}</td>
                <td>
                    <button @click="editContact(contact)" id="edit">编辑</button>
                    <button @click="deleteContact(contact.id)" id="delete">删除</button>
                </td>
            </tr>
        </table>
        <h2 v-if="editing">编辑联系人</h2>
        <h2 v-else>添加联系人</h2>
        <form @submit.prevent="editing ? updateContact() : addContact()">
            <label for="name">姓名:</label>
            <input type="text" id="name" v-model="newContact.name" required><br>
            <label for="address">住址:</label>
            <input type="text" id="address" v-model="newContact.address" required><br>
            <label for="phone">电话:</label>
            <input type="text" id="phone" v-model="newContact.phone" required><br>
            <button type="submit">{{ editing ? '更新' : '添加' }}</button>
            <button type="button" v-if="editing" @click="cancelEdit()">取消</button>
        </form>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                contacts: [],
                newContact: {
                    id:'',
                    name: '',
                    address: '',
                    phone: ''
                },
                editing: false,
                editingId: null
            },
            mounted() {
                this.getContacts();
            },
            methods: {
                getContacts() {
                    axios.get('/contacts')
                        .then(response => {
                            console.log(response.data.data)
                            this.contacts = response.data.data;
                        })
                        .catch(error => {
                            console.log(error);
                        });
                },
                addContact() {
                    axios.post('/contacts', this.newContact)
                        .then(response => {
                            if(response.data.flag===true)
                            this.contacts.push(response.data.data);
                            this.newContact = {
                                id:'',
                                name: '',
                                address: '',
                                phone: ''
                            };
                        })
                        .catch(error => {
                            console.log(error);
                        });

                },
                editContact(contact) {
                    this.editing = true;
                    this.editingId = contact.id;
                    this.newContact = {
                        name: contact.name,
                        address: contact.address,
                        phone: contact.phone
                    };
                },
                updateContact() {
                    axios.put(`/contacts/${this.editingId}`, this.newContact)
                        .then(response => {
                            const updatedContact = response.data.data;
                            const index = this.contacts.findIndex(contact => contact.id === updatedContact.id);
                            if (index !== -1) {
                                this.contacts.splice(index, 1, updatedContact);
                            }
                            this.cancelEdit();
                        })
                        .catch(error => {
                            console.log(error);
                        });
                },
                deleteContact(id) {
                    axios.delete(`/contacts/${id}`)
                        .then(() => {
                            this.contacts = this.contacts.filter(contact => contact.id !== id);
                        })
                        .catch(error => {
                            console.log(error);
                        });

                },
                cancelEdit() {
                    this.editing = false;
                    this.editingId = null;
                    this.newContact = {
                        name: '',
                        address: '',
                        phone: ''
                    };
                }
            }
        });
    </script>
</body>
</html>